<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电影售票</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
<!--    https://www.yidepiao.com/movie/4596 -->
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="title">
            <div class="c900 flex">
                <el-link :underline="false" href="index.html"><h1>电影售票平台</h1></el-link>
                <nav>
                    <el-link href="index.html" class="center" :underline="false">首页</el-link>
                    <el-link href="hots.html" class="center" :underline="false">热映电影</el-link>
                    <el-link class="center" :underline="false">电影院</el-link>
                    <el-link class="center" :underline="false">优惠活动</el-link>
                </nav>
                <el-input style="width: auto" placeholder="请输入电影,影院,活动">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <div class="flex">
                    <el-avatar src="https://img1.baidu.com/it/u=681713666,1923984648&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></el-avatar>
                    <el-link href="register.html">注册</el-link>
                    <el-link href="login.html">登录</el-link>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="c900">
                <el-card>
                    <el-card shadow="never" style="background-color: #0a699999">
                        <el-avatar icon="el-icon-time"></el-avatar>
                        <div style="float: right;padding-right: 370px">
                            <span>请在<span style="font-size: 20px">13</span>分钟<span style="font-size: 20px">44</span>秒内完成支付</span>
                            <p style="color: red">超时订单会自动取消，如遇支付问题，请致电猫眼客服：1010-5335</p>
                        </div>

                    </el-card>

                    <el-table :data="orders" style="width: 100%; flex-grow: 1">
                        <el-table-column prop="data.movie.name" :header-cell-style="{fontSize: '14px',textAlign:'center',backgroundColor: '#f8f8f8',color:'#333'}" label="影片"></el-table-column>
                        <el-table-column prop="data.start" :header-cell-style="{fontSize: '14px', backgroundColor: '#f8f8f8',color:'#333'}" label="时间" show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="data.hall.studios.name" :header-cell-style="{fontSize: '14px', backgroundColor: '#f8f8f8',color:'#333'}" label="影院" show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="sitinfo" :header-cell-style="{fontSize: '14px', backgroundColor: '#f8f8f8',color:'#333'}" label="座位" show-overflow-tooltip="true"></el-table-column>
                    </el-table>
                    <el-row>
                        <el-col span="15">
                            <div class="pay_style_con clearfix">
                                <input @click="order.payWay = '微信支付'" type="radio" name="pay_style">
                                <label class="weixin">微信支付</label>
                                <input @click="order.payWay = '支付宝'" type="radio" name="pay_style">
                                <label class="zhifubao"></label>
                                <input @click="order.payWay = '银行卡支付'" type="radio" name="pay_style">
                                <label class="bank">银行卡支付</label>
                            </div>
                        </el-col>
                    </el-row>
                        <el-row>
                            <el-col span="12" push="19">
                                实际支付:
                                <span style="color: red">￥{{order.money}}</span>
                                <el-button type="primary" @click="pay">确认支付</el-button>
                            </el-col>
                        </el-row>
                </el-card>
            </div>
        </el-main>
        <el-footer class="flex title" style="justify-content: center;height: 30px">
            <a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
        </el-footer>
    </el-container>
    <el-dialog title="提示" :visible.sync="showEditor" width="30%">
        <el-result icon="success" title="交易成功" subTitle="请根据提示进行操作">
            <template slot="extra">
                <span style="font-size: 20px;font-weight: bold">{{"-" + order.money.toFixed(2) + "元"}}</span>
                <p>取票码：7653</p>
                <el-descriptions title="订单信息">
                    <el-descriptions-item label="付款方式">{{order.payWay}}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions>
                    <el-descriptions-item label="购票手机号">{{order.buyPhone}}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions>
                    <el-descriptions-item label="支付时间">{{new Date().toLocaleString()}}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions>
                    <el-descriptions-item label="电影名称">《{{this.orders[0] ? this.orders[0].data.movie.name:''}}》</el-descriptions-item>
                </el-descriptions>
            </template>
        </el-result>
        <span slot="footer" class="dialog-footer">
    <el-button @click="showEditor = false">取 消</el-button>
    <el-button type="primary" @click="location.href='index.html'">确 定</el-button>
  </span>
    </el-dialog>
</div>
</body>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            orders: [],
            order:{sid:'',sitnum:'',buyPhone:'',money:0,payWay:''},
            showEditor:false
        },
        methods:{
            pay(){
                if (this.order.payWay == ''){
                    this.$alert("请选择支付方式");
                    return;
                }
                axios.post("order/pay",this.order).then(res=>{
                    if (res.data.code == 1) {
                        this.showEditor = true;
                    }else{
                        this.$alert(res.data.msg);
                    }
                });
            }
        },
        created(){
            //获取地址里的参数
            let param = location.search.replace("?","").split("&");
            this.order.sid = param[0].substring(param[0].indexOf("=") + 1);
            this.order.buyPhone = param[1].substring(param[1].indexOf("=") + 1);
            this.order.sitnum = param[2].substring(param[2].indexOf("=") + 1);
            axios.get("order/querySchedule",{
                params:{
                    sid:this.order.sid
                }
            }).then(res=>{
                let num = this.order.sitnum.split(";");
                for (let i = 0; i < num.length; i++) {
                    res.data.start =  res.data.start.replace('T', ' ').substring(0, 19);
                    res.data.end = res.data.end.replace('T', ' ').substring(0, 19);
                    let sitinfo = res.data.hall.name + " " + res.data.hall.addr + " " + res.data.hall.type + " " +num[i] +"号";
                    let data = {data:res.data,sitnum:num[i],sitinfo:sitinfo};
                    this.orders.push(data);
                }
                this.order.money = res.data.price * num.length;
            });
        }
    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    .el-main{
        padding: 10px 0px;
        overflow-x: hidden;
        background-image: url("https://img2.baidu.com/it/u=2454799735,2381918605&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500");
        background-size: cover;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        gap: 10px;
    }
    .flex>*{
        margin: 0px;
        padding: 0px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 100%;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .detail{
        color:#666;
        font-size: .8em;
        gap:5px;
        margin-block: 10px;
    }
    .detail>label{
        color:#999
    }
    table a{
        text-decoration: none;
        color: #fff;
        padding: 5px 10px;
        background-color: #00A0D1;
    }
    td{
        height: 50px;
    }
    td>p{
        margin: 0px;
    }
    .table_1 {
        height: 37px;
        line-height: 37px;
        background: #dff0f5;
        border: 1px #ccc solid;
        text-align: center;
        font-weight: bold;
        color: #444;
    }
    .seats{
        width: 500px;
        margin: 0px auto 40px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .seat{
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
    .el-icon-search{
        color: #666;
    }
    /*支付方式样式*/
    .pay_style_con{
        margin:20px;
    }
    .pay_style_con input{
        float:left;
        margin:14px 7px 0 0;
    }
    .pay_style_con label{
        float:left;border:1px solid #ccc;
        background-color:#fff;
        padding:10px 10px 10px 40px;
        margin-right:25px;
    }

    /*支付背景图标*/
    .pay_style_con .cash{
        background:url(./image/pay_icons.png) 8px top no-repeat #fff;
    }
    .pay_style_con .weixin{
        background:url(./image/pay_icons.png) 6px -36px no-repeat #fff;
    }
    .pay_style_con .zhifubao{
        background:url(./image/pay_icons.png) 12px -72px no-repeat #fff;
        width:50px;
        height:16px;
    }
    .pay_style_con .bank{
        background:url(./image/pay_icons.png) 6px -108px no-repeat #fff;
    }

</style>

</html>